<template>
  <div class="content-card">
    <div class="title">
      <a-icon type="tags"></a-icon>
      <span>{{ "高频目录TOP5" }}</span>
    </div>
    <div class="body">
      <div id="overview-backup__chart2" style="width: 100%; height: 100%" />
    </div>
  </div>
</template>

<script>
import API from "@/api/overview";

export default {
  name: "o5-chart",
  props: {},
  data() {
    return {
      chartData: null,
    };
  },
  mounted() {
    this.getChartData();
  },
  methods: {
    getChartData() {
      let handleV1 = (res) => (
        (this.chartData = res.data.body.data), this.registerAndSetCharts2()
      );
      API.getChart5_v1().then(handleV1);
    },
    registerAndSetCharts2() {
      let charts2 = this.$echarts.init(
        document.getElementById("overview-backup__chart2")
      );
      //对数据进行格式化
      var name = [];
      var num = [];
      // console.log(Object.values(this.chartData).length);
      for (var item in this.chartData) {
        name.push(this.chartData[item].CATALOG_NAME);
        num.push(Object.values(this.chartData[item])[0]);
        // num.push(this.chartData[item][1]);
      }
      let option2 = {
        tooltip: {
          trigger: "item",
        },
        xAxis: {
          // data: [
          //   "人口基本信息",
          //   "户籍信息",
          //   "不动产登记",
          //   "证照申请",
          //   "医保查询",
          // ],
          data: name,
          axisLabel: {
            //坐标刻度相关显示设置
            interval: 0,
            rotate: "0", //旋转角度
            // textstyle: {
            //   fontSize: 10,
            // },
          },
        },
        yAxis: {
          name: "(万)",
        },
        series: [
          {
            name: "高频Top5",
            type: "bar",
            // data: [20, 28, 38, 36, 56],
            data: num,
            barWidth: 15,
            itemStyle: {
              color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#93B9FF",
                },
                {
                  offset: 1,
                  color: "#5C87D4",
                },
              ]),
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      charts2.setOption(option2);
    },
  },
};
</script>

<style lang="less" scoped>
.content-card {
  height: 100%;
  .title {
    display: flex;
    align-items: center;
    padding: 10px 0;
    background: linear-gradient(to right, #dee9ff, #ffffff);
    i {
      color: #6989c6;
      margin: 0 15px;
      font-size: 18px;
    }
    span {
      font-size: 16px;
      font-weight: 500;
    }
  }
  .body {
    width: 100%;
    height: 300px;
  }
}
</style>
